<template>
  <el-dialog v-model="dialogVisible" title="对应人员" width="600" draggable>
    <div>
      <el-form size="small">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="formInline.name" placeholder="清输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门">
              <el-tree-select v-model="formInline.value" :data="data" :render-after-expand="false"
                style="width: 240px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" style="color: #fff" color="#20B1EB" @click="onSubmit">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="tableData" border size="small" @row-dblclick="handDblclick" @current-change="handleCurrentChange"
      highlight-current-row>
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="性别" prop="gender" />
      <el-table-column label="编号" prop="number" />
      <el-table-column label="民族" prop="nation" />
      <el-table-column label="学历" prop="educationalBackground" sortable />
      <el-table-column label="简码" prop="simplifiedCode" />
      <el-table-column label="所属部门" prop="belonging" />
      <el-table-column label="建档时间" prop="putDate" />
      <el-table-column label="是否停用" prop="isDeactivate" />
    </el-table>
    <div class="table-footer">
      <div></div>
      <el-pagination style="--el-color-primary: #20B1EB;" small background layout="prev, pager, next" :total="50" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false" style="color: #fff" color="#20B1EB"
          size="small">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { pData } from '../interface/index.ts'
const data = []
const tableData = [
  {
    name: "临床",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "治疗",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "护理",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "西药房",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "成药房",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "领药部门",
    state: "门诊/住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
];
const formInline = {}
const currentRow = ref()
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};
const handleCurrentChange = (val: pData | undefined) => {
  currentRow.value = val
}

const emit = defineEmits<{
  (e: "on-click", item: pData): void
}>()

// 当双击时
const handDblclick = (val: pData | undefined) => {
  dialogVisible.value = false
  emit('on-click', val)
}
defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
.table-footer {
  padding: 10px 0;
  text-align: right;
  display: flex;
  justify-content: space-between;
}
</style>
